<template>
	<div class="number-grow-warp">
    {{ start }}
		<span ref="numberGrow" :data-time="time" class="number-grow" :data-value="value">0</span>
    {{ end }}
	</div>
</template>
 
<script>
export default {
  props: {
    start:{
      type:String,
      default:''
    },
    end:{
      type:String,
      default:''
    },
    time: {
      type: Number,
      default: 2
    },
    value: {
      type: Number,
      default: 0
    },
    fiexd: {
      type: Number,
      default: 0
    }
  },
  methods: {
    numberGrow (ele) {
      let _this = this
 
      let step = (_this.value * 10) / (_this.time * 1000)
      let current = 0
      let start = 0
      let t = setInterval(function () {
        start += step
        if (start > _this.value) {
          clearInterval(t)
          start = _this.value
          t = null
        }
        if (current === start) {
          return
        }
        current = start
        ele.innerHTML = current.toFixed(_this.fiexd).replace(/(\d)(?=(?:\d{3}[+]?)+$)/g, '$1,')
      }, 10)
    }
  },
  mounted () {
    this.numberGrow(this.$refs.numberGrow)
  }
}
</script>
 
<style>
.number-grow-warp{
  transform: translateZ(0);
  color: #fff;
  display: flex;
  justify-content: center;
  font-family: 'Poppins-SemiBold';
  font-size: 48px;
  font-weight: 600;
  background: linear-gradient(90deg, #20B64A 0%, #98DE52 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.number-grow {
    font-size: 42px;
    font-family: 'Poppins-SemiBold';
    color: #333;
    font-size: 48px;
    font-weight: 600;
    background: linear-gradient(90deg, #20B64A 0%, #98DE52 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
@media screen and (max-width:992px ) and (min-width:768px) {   
  .number-grow{font-size: 36px}
}
@media screen and (max-width:768px ) {
  .number-grow{font-size: 24px}
}
</style>